<script setup lang="ts">
import { computed, ref } from 'vue'
import chart from '@/components/common/chart.vue'
import { color } from 'echarts';

interface chartData {
  name: string,
  total: number,
  list: {
    name: string,
    value: number
  }[]
}

const props = defineProps<{
  data: chartData[]
  innerColor: string[]
  outColor: string[]
  height?: string
  width?: string
}>()

const width = props.width || '100%';
const height = props.height || '100%';
const innerColor = props.innerColor || ['rgba(107, 230, 193, 1)', 'rgba(63, 177, 227, 1)', 'rgba(106, 117, 158, 1)']
const outColor = props.outColor || ['rgba(255, 53, 53, 1)', 'rgba(254, 133, 0, 1)', 'rgba(255, 191, 1, 1)', 'rgba(34, 184, 254, 1)']

const options = computed(() => {
  let inner: any[] = [];
  let outer: any[] = [];

  props.data.forEach((item) => {
    inner.push({
      value: item.total,
      name: item.name
    })
    item.list.forEach((i) => {
      outer.push(i)
    })
  })

  let opt = {
    animation: false,
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '',
        type: 'pie',
        selectedMode: 'single',
        radius: ['30%', '60%'],
        label: {
          show: true,
          formatter: '{d}%',
          position: 'inner',
          fontSize: 20,
          color: '#ffffff'
        },
        padAngle: 2,
        labelLine: {
            show: false
        },
        data: inner,
        color: innerColor
      },
      {
          name: '',
          type: 'pie',
          radius: ['63%', '78%'],
          labelLine: {
            length: 5,
            length2: 0,
            lineStyle: {
              color: 'transparent'
            }
          },
          padAngle: 2,
          label: {
            show: true,
            formatter: '{c}',
            position: 'outside',
            fontSize: 20,
            color: '#000'
          },
          data: outer,
          color: outColor
      }
    ]
  }
  return opt;
})


</script>

<template>
  <div :style="{ width: `${width}`, height: `${height}` }" class="chart-box">
    <chart class="chart" :options="options" />
  </div>
</template>

<style scoped lang="stylus">
.chart-box {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>